import React, { useEffect, useRef, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";

export default function Header() {
  // 状态变量
  // 记录当前登陆用户的名字
  let [userName, setUserName] = useState("");

  //是否显示购物车的下拉菜单
  let [showDropdown, setShowDropdown] = useState(false);
  // 记录搜索时输入的内容
  let [searchKeyword, setSearchKeyword] = useState("");
  let searchInput = useRef();
  // 用于在页面跳转的方法
  let nav = useNavigate();
  // 当前页面路由地址保存
  // 获取当前组件所在组件的地址
  let { pathname, search } = useLocation();

  //生命周期:组件挂载时
  useEffect(function () {
    let n = sessionStorage["userName"];
    if (n) {
      setUserName(n);
    }
  }, []);
  // 点击退出
  function logout() {
    // 删除本地 存储的登陆用户名
    delete sessionStorage["userName"];
    // 修改当前状态变量 点击退出变为初始值
    setUserName("");
  }
  // 输入框输入的内容
  function beginSearch() {
    let kw = searchInput.current.value;
    // console.log(kw);
    // 跳转到页面
    nav("/product");
  }
  // 保存当前路径 跳转到登陆页面
  function toLogin() {
    let p = pathname === "/login" ? "/" : pathname;
    p += search; //路径上拼接上路由参数
    sessionStorage["pathBeforeLogin"] = p;
    console.log(p);
    nav("/login");
  }
  return (
    <>
      <header className="header container">
        <h1 className="logo">
          <Link to="/" className="link"></Link>
        </h1>
        <div className="h_con">
          <ul className="clearfloat">
            <li className="phone">4000-585-116</li>
            <li>
              <a href="#">中文</a>
            </li>
            <li>
              <em>|</em>
            </li>
            <li>
              <a href="#">English</a>
            </li>
            <li>
              <a href="#" className="weixin"></a>
            </li>
            <li>
              <a href="#" className="weibo"></a>
            </li>
            {userName ? (
              <>
                <li className="top_user">
                  <Link to="/usercenter">{userName}</Link>
                </li>
                <li className="top_quit">
                  <a onClick={logout} href="#">
                    退出
                  </a>
                </li>
              </>
            ) : (
              <>
                <li>
                  <button onClick={toLogin} className="h_login">
                    登录
                  </button>
                </li>
                <li>
                  <em>|</em>
                </li>
                <li>
                  <Link to="/register" className="h_register">
                    注册
                  </Link>
                </li>
              </>
            )}
          </ul>
          <div className="search clearfloat">
            <button onClick={beginSearch} type="button"></button>
            <input type="text" defaultValue={searchKeyword} ref={searchInput} />
          </div>
        </div>
      </header>
      {/*nav*/}
      <nav className="navbar">
        <div className="container">
          <div className="nav">
            <ul>
              <li className={pathname === "/" ? "cur" : undefined}>
                <Link to="/">
                  <span className="icon_home"></span>首页
                </Link>
              </li>
              <li className={pathname === "/about" ? "cur" : undefined}>
                <Link to="/about">关于净美仕</Link>
              </li>
              <li
                className={
                  pathname === "/news" || pathname === "/news_details"
                    ? "cur"
                    : undefined
                }
              >
                <Link to="/news">公司动态</Link>
              </li>
              <li className={pathname === "/product" ? "cur nav_pd" : "nav_pd"}>
                <Link to="/product?type=1">
                  产品中心<span className="icon_pd"></span>
                </Link>
                <div className="pd_dropdown">
                  <Link to="/product?type=1">净美仕净化器</Link>
                  <Link to="/product?type=2">净美仕滤网</Link>
                </div>
              </li>
              <li className={pathname === "/contact" ? "cur" : undefined}>
                <Link to="/contact">联系我们</Link>
              </li>
            </ul>
          </div>
          <div
            onMouseEnter={() => setShowDropdown(true)}
            onMouseLeave={() => setShowDropdown(false)}
            className="s_cart"
          >
            <Link to="/cart">
              <span className="icon_cart"></span>购物车(
              <strong id="cart_sum">0</strong>)<span className="icon_sj"></span>
            </Link>
            <div
              className="cart_dropdown"
              style={{ display: showDropdown ? "block" : "none" }}
            >
              <h3>您的购物车为空~</h3>
              <ul>
                {/*<li>*/}
                {/*<Link to="#"><img src="product-imgs/jhq-m8088a.jpg" alt=""/></Link>*/}
                {/*<div>*/}
                {/*<span>-</span><input type="text" value="2"/><span>+</span>*/}
                {/*</div>*/}
                {/*<strong>¥1599.00</strong>*/}
                {/*<em></em>*/}
                {/*</li>*/}
                {/*<li>*/}
                {/*<Link to="#"><img src="product-imgs/jhq-m8088a.jpg" alt=""/></Link>*/}
                {/*<div>*/}
                {/*<span>-</span><input type="text" value="2"/><span>+</span>*/}
                {/*</div>*/}
                {/*<strong>¥1599.00</strong>*/}
                {/*<em></em>*/}
                {/*</li>*/}
              </ul>
              <div className="cd_js clearfloat">
                <span>
                  共计：<strong>0.00</strong>
                </span>
                <Link to="#">结算</Link>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </>
  );
}
